<template>
	<view>
		<!-- 顶部信息 -->
		<view class="top">
			<view class="title">首页</view>
			<uni-search-bar bgColor="#fff" class="uni-mt-10" radius="100" placeholder="郑州市高新区" clearButton="none"
				cancelButton="none">
				<image class="dw" src="@/static/images/ljh/dw@2x.png" slot="searchIcon" color="#999999" size="18"
					type="home" />
			</uni-search-bar>
			<uni-card style="padding-bottom: 40rpx;margin-bottom: 150rpx;margin-top: 50rpx;">
				<uni-grid :column="4" :highlight="true" :showBorder="false">
					<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
						<view @click="nav_btn(index)" class="grid-item-box" style="background-color: #fff;">
							<image class="subimg" :style="{'background-color':item.color}" :src="item.url"></image>
							<text class="text">{{item.text}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-card>
		</view>

		<!-- 附件加油 -->
		<uni-card class="aa1" title="附件加油站" extra="更多" sub-title="根据您的位置推荐最近的加油站" style="margin-top: 100rpx;"
			@click="more_jy_btn">
			<map class="map"></map>
		</uni-card>

		<!-- 优惠团购 -->
		<uni-card title="优惠团购" extra="更多" sub-title="聚会袭来,为您的爱车续航" style="margin-top: 50rpx;" @click="more_buy_btn">
			<uni-grid :column="2" :highlight="true" :showBorder="false">
				<uni-grid-item v-for="(item, index) in YHlist" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<image class="yhimg" :style="{'background-color':item.color}" :src="item.url"></image>
						<text class="text">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-card>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						url: '../../static/images/ljh/clwx@2x.png',
						text: '车辆维修',
						color: 'blue'
					},
					{
						url: '../../static/images/ljh/by.png',
						text: '汽车保养',
						color: 'orange'
					},
					{
						url: '../../static/images/ljh/xc@2x.png',
						text: '专业洗车',
						color: 'green'
					},
					{
						url: '../../static/images/ljh/jyq@2x.png',
						text: '就近加油',
						color: 'cornflowerblue'
					}
				],
				YHlist: [{
						url: '../../static/images/ljh/clwx@2x.png',
						text: '车辆维修',
						color: 'blue'
					},
					{
						url: '../../static/images/ljh/by.png',
						text: '汽车保养',
						color: 'orange'
					},
					{
						url: '../../static/images/ljh/xc@2x.png',
						text: '专业洗车',
						color: 'green'
					},
					{
						url: '../../static/images/ljh/jyq@2x.png',
						text: '就近加油',
						color: 'cornflowerblue'
					}
				],
			}
		},
		methods: {
			nav_btn(index) {

				if (index == 0) {
					uni.$u.route('/pages/ys/carFix1/carFix1')
				} else if (index == 1) {
					uni.$u.route('/pages/ls/carMaintenance/carMaintenance')
				} else if (index == 2) {
					uni.$u.route('/pages/lzx/professionalCarWash')
				} else if (index == 3) {
					uni.$u.route('/pages/ljh/refuelNearby/refuelNearby')
				}
			},
			more_jy_btn() {
				uni.$u.route('/pages/ljh/refuelNearby2/refuelNearby2')
			},
			more_buy_btn() {
				uni.$u.route('/pages/ly/buy/buy1')
			}
		}
	}
</script>

<style>
	.top {
		width: 100%;
		height: 450rpx;
		background-image: url(@/static/images/ljh/tc1.png);
	}

	.title {
		width: 100%;
		color: white;
		text-align: center;
		padding: 30rpx 0rpx;
		font-size: 35rpx;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.dw {
		width: 35rpx;
		height: 35rpx;
		margin-left: 20rpx;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.subimg {
		width: 80rpx;
		height: 80rpx;
		background-color: blue;
		padding: 10rpx;
		border-radius: 30rpx;
		/* margin-bottom: 10rpx; */
	}

	.map {
		width: 100%;
		height: 300rpx;
	}

	.yhimg {
		width: 250rpx;
		height: 180rpx;
		background-color: blue;
		padding: 10rpx;
		border-radius: 30rpx;
	}
</style>